import React, { useRef } from 'react';
import { Form, Card } from 'antd';
import _ from 'lodash';
import { useTranslation } from 'react-i18next';
import { scrollToFirstError } from '@/utils';
import Name from '../../components/items/Name';
import HTTP from '../../components/items/HTTP';
import BasicAuth from '../../components/items/BasicAuth';
import SkipTLSVerify from '../../components/items/SkipTLSVerify';
import Headers from '../../components/items/Headers';
import Description from '../../components/items/Description';
import Footer from '../../components/items/Footer';
import Cluster from '../../components/items/Cluster';

export default function FormCpt({ action, data, onFinish, submitLoading }: any) {
  const { t } = useTranslation('datasourceManage');
  const [form] = Form.useForm();
  const clusterRef = useRef<any>();

  return (
    <Form
      form={form}
      layout='vertical'
      onFinish={(values) => {
        onFinish(values, clusterRef.current);
      }}
      onFinishFailed={() => {
        scrollToFirstError();
      }}
      initialValues={data}
      className='settings-source-form'
      data-oid='-rlth4t'
    >
      <Card title={t(`${action}_title`)} data-oid='t_sop3t'>
        <Name data-oid='b3m5d_z' />
        <HTTP placeholder='http://localhost:6041' data-oid='g.g77zo' />
        <BasicAuth data-oid='ffm7w6u' />
        <SkipTLSVerify data-oid='bq5cyew' />
        <Headers data-oid='nev.4pk' />
        <Cluster form={form} clusterRef={clusterRef} data-oid='jijxg2x' />
        <Description data-oid='9250.0o' />
      </Card>
      <Footer id={data?.id} submitLoading={submitLoading} data-oid='obgpqns' />
    </Form>
  );
}
